{extend name="base" /} {block name="main"}
<style>
  .tabs-group {
    position: relative;
    overflow-y: hidden;
  }
  .tabs-group .title {
    float: left;
    padding: 10px 0;
    width: 80px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .tabs-group .content {
    list-style: none;
    padding: 0;
    margin: 0 0 0 60px;
  }
  .tabs-group .content > li {
    float: left;
    padding: 5px 12px;
  }
  .tabs-group .content > li > a {
    display: block;
    padding: 5px 10px;
    border: none;
    -webkit-border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 4px;
    -moz-background-clip: padding;
    border-radius: 4px;
    background-clip: padding-box;
    color: #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .tabs-group .content > li.active > a,
  .tabs-group .content > li:focus > a,
  .tabs-group .content > li:hover > a {
    color: #fff;
  }
</style>
<div class="container Wauto">
  <div class="bnBox cateBn">
    <div class="cateBnImg" style="background-image: url({$sort.pic})"></div>
  </div>
  <div class="main w1200">
    <div class="article w1">
      <div class="archive-top anim fadeInUp">
        <div class="archive-title">
          <h1>{$sort.name}</h1>
          <span></span>
        </div>
        <div class="archive-description">
          <p>{$sort.description}</p>
        </div>
      </div>
      <div class="subcate anim fadeInUp" data-wow-delay=".3s">
        <div id="subcate" data-type="sort" data-infoid="2">
          <ul>
            {bd:nav parent="$sort['tcode']" }
            <li class="{if $nav['scode']==$sort['scode']}active{/if}">
              <a href="{$nav.link}">{$nav.name}</a>
            </li>
            {/bd:nav}
          </ul>
        </div>

        <div class="tabs-group">
          <div class="title">{:__('Type')}:</div>
          <ul class="content clearfix">
            <li>{bd:selectall field="ext_type" /}</li>
            {bd:select field="ext_type"}
            <li class="{$select.current?'active':''}">
              <a href="{$select.link}">{$select.value}</a>
            </li>
            {/bd:select}
          </ul>
          <div class="title">{:__('Color')}:</div>
          <ul class="content clearfix">
            <li>{bd:selectall field="ext_color" /}</li>
            {bd:select field="ext_color"}
            <li class="{$select.current?'active':''}">
              <a href="{$select.link}">{$select.value}</a>
            </li>
            {/bd:select}
          </ul>
        </div>
      </div>

      <div class="post list">
        <div class="PostShow">
          <ul>
            {bd:list}
            <li data-id="{$list.scode}" class="anim fadeInUp">
              <div class="post-img loading">
                <a
                  class="pic float-left"
                  href="{$list.link}"
                  title="{$list.title}"
                  rel="bookmark"
                >
                  <div class="msk"></div>
                  <i class="fa fa-search"></i>
                  <img
                    class="b-lazy"
                    src="{$list.ico}"
                    data-src="{$list.ico}"
                    alt="{$list.title}"
                  />
                </a>
              </div>
              <a href="{$list.link}" title="{$list.title}">
                <h4>{$list.title}</h4>
                <i class="h2">{$list.description}</i>
                <div class="pt-2">
                  <i class="fa fa-long-arrow-right"></i>
                </div>
              </a>
            </li>
            {/bd:list}
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <nav class="text-center">{$page.bar |raw}</nav>
  </div>
</div>
{/block}
